<template>
  <div>
    <div class="outmain ba_f formwidth">
      <div class="shuju_title mar_b20">
        <div class="shuju_title_text">
          <span>支付宝小程序更新包下载</span>
        </div>
      </div>
      <div>
        <el-form ref="form" :model="form" label-width="180px" class="mar_t20">
          <div class="stepsLeft mar_t20">
            <el-steps direction="vertical" :active="3">
              <el-step title="下载并安装支付宝小程序开发者工具，如果已经安装可跳过这一步。">
                <template slot="description">
                  <div class="xiazai">
                    <a href="https://docs.alipay.com/mini/ide/download" target="_blank">
                      <el-button type="primary" class>下载支付宝开发者工具</el-button>
                    </a>
                  </div>
                </template>
              </el-step>
              <el-step title="下载小程序代码包，并解压。">
                <template slot="description">
                  <div class="xiazai">
                    <a :href="downloadPage" download="小程序代码包">
                      <el-button type="primary">下载小程序代码包</el-button>
                    </a>
                  </div>
                </template>
              </el-step>
              <el-step title="运行支付宝小程序开发者工具，选择打开项目，打开解压出来的小程序代码包，点击上传。"></el-step>
            </el-steps>
          </div>
        </el-form>
      </div>
    </div>
    <div class="mar_t20 ba_f pad_20 t_c">
      <el-button type="primary">保存</el-button>
    </div>
  </div>
</template>
<script>
import { getConfig } from '@/api/setup.js';
export default {
  data() {
    return {
      activeName: '1',
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      downloadPage: '',
      tableData: [
        {
          date: '首页',
          name: 'www.baidu.comsdf'
        },
        {
          date: '点单页',
          name: 'www.baidu.comsdf'
        },
        {
          date: '个人中心',
          name: 'www.baidu.comXYPxX6P7HX1cNc/Pfsdf'
        },
        {
          date: '商户页面',
          name: 'www.baidu.comsdf'
        }
      ]
    };
  },
  created() {
    getConfig({
      ident: 'aliSet'
    }).then((res) => {
      if (res.code == 1) {
        this.downloadPage = res.data.downloadPage;
      }
    });
  }
};
</script>
<style>
.orderpop p {
  line-height: 24px;
}
.msgtext {
  text-indent: -70px;
  padding-left: 70px;
}

.stepsLeft {
  height: 330px;
  padding-left: 30px;
  padding-top: 10px;
  padding-bottom: 20px;
}
.el-step.is-vertical .el-step__line {
  left: 12px;
  width: 1px;
}
.el-step__icon {
  width: 25px;
  height: 25px;
}
.el-step__title.is-finish,
.el-step__description.is-finish {
  color: #333;
}
.el-step__line-inner {
  border: none;
  border-left: 1px solid #67c23a;
}
.el-step__icon.is-text {
  border: 1px solid;
}
</style>
